<template>
  <div class="filter-sheet-field-more-box">
    <i class="el-icon-arrow-down" @click="showMoreBox"></i>
    <ul
      class="more-box"
      v-show="moreBoxVisible && type"
      :style="{'left':this.left+'px', 'top': this.top+'px'}"
    >
      <li @click="delBlank">删除空</li>
      <li @mouseenter="typeMoreBoxVisible = true" @mouseleave="typeMoreBoxVisible = false">改变类型</li>
      <li @mouseenter="filterMoreBoxVisible = true" @mouseleave="filterMoreBoxVisible = false">
        <span class="filter" v-show="hasNumber">数字筛选器</span>
        <span class="filter" v-show="hasObj">文本筛选器</span>
        <span class="filter" v-show="hasDatetime">日期筛选器</span>
      </li>
    </ul>
    <ul class="more-box" v-show="moreBoxVisible && !type">
      <li @click="showDelFrontColumn">删除前几列</li>
      <li @click="showDelLastColumn">删除后几列</li>
      <li @click="showRepetition">删除重复项</li>
    </ul>
    <ul
      class="filter-more"
      v-show="hasNumber && filterMoreBoxVisible"
      @mouseenter="filterMoreBoxVisible = true"
      @mouseleave.stop="filterMoreBoxVisible = false"
      :style="{'left':this.left+10+'px', 'top': this.top+'px'}"
    >
      <li @click="filter('get')">大于</li>
      <li @click="filter('lt')">小于</li>
      <li @click="filter('et')">等于</li>
      <li @click="filter('get')">大于等于</li>
      <li @click="filter('let')">小于等于</li>
      <li @click="filter('ut')">不等于</li>
    </ul>
    <ul
      class="filter-more"
      v-show="hasObj && filterMoreBoxVisible"
      @mouseenter="filterMoreBoxVisible = true"
      @mouseleave.stop="filterMoreBoxVisible = false"
      :style="{'left':this.left+10+'px', 'top': this.top+'px'}"
    >
      <li @click="filter('et')">等于</li>
      <li @click="filter('ut')">不等于</li>
    </ul>
    <ul
      class="filter-more"
      v-show="hasDatetime && filterMoreBoxVisible"
      @mouseenter="filterMoreBoxVisible = true"
      @mouseleave.stop="filterMoreBoxVisible = false"
      :style="{'left':this.left+10+'px', 'top': this.top+'px'}"
    >
      <li @click="filter('get')">大于</li>
      <li @click="filter('lt')">小于</li>
      <li @click="filter('et')">等于</li>
      <li @click="filter('get')">大于等于</li>
      <li @click="filter('let')">小于等于</li>
      <li @click="filter('ut')">不等于</li>
    </ul>

    <ul
      class="type-more"
      v-show="typeMoreBoxVisible"
      @mouseenter="typeMoreBoxVisible = true"
      @mouseleave.stop="typeMoreBoxVisible = false"
      :style="{'left':this.left+10+'px', 'top': this.top+'px'}"
    >
      <li @click="setType('object')">
        <img :class="{'hidden': !hasObj}" src="@/assets/image/main/钩.png" />
        <span>文本</span>
      </li>
      <li @click="setType('float')">
        <img :class="{'hidden': !hasFloat}" src="@/assets/image/main/钩.png" />
        <span>小数</span>
      </li>
      <li @click="setType('int')">
        <img :class="{'hidden': !hasInt}" src="@/assets/image/main/钩.png" />
        <span>整数</span>
      </li>
      <li @click="setType('datetime')">
        <img :class="{'hidden': !hasDatetime}" src="@/assets/image/main/钩.png" />
        <span>日期</span>
      </li>
    </ul>

    <el-dialog width="30%" title="删除前几列" :visible.sync="delFrontColumnBoxVisible" append-to-body>
      <el-input v-model="numberLineFront"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delFrontColumnBoxVisible = false">取 消</el-button>
        <el-button type="primary" @click="delFrontColumn">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog width="30%" title="删除后几列" :visible.sync="delLastColumnBoxVisible" append-to-body>
      <el-input v-model="numberLineLast"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delLastColumnBoxVisible = false">取 消</el-button>
        <el-button type="primary" @click="delLastColumn">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog width="30%" title="删除重复项" :visible.sync="delRepetitionBoxVisible" append-to-body>
      <div class="delRepetitionBox">
        <el-checkbox-group v-model="repetitionColumns">
          <el-checkbox
            v-show="index > 0"
            v-for="(column, index) in columns"
            :key="index"
            :label="column"
          ></el-checkbox>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delRepetitionBoxVisible = false">取 消</el-button>
        <el-button type="primary" @click="delRepetition">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: [
    "index",
    "type",
    "types",
    "column",
    "columns",
    "sheetName",
    "values",
    "filterBoxVisible",
    "conditionList",
  ],

  data() {
    return {
      numberLineFront: 0,
      numberLineLast: 0,
      repetitionColumns: [],
      moreBoxVisible: false,
      filterMoreBoxVisible: false,
      delFrontColumnBoxVisible: false,
      delLastColumnBoxVisible: false,
      delRepetitionBoxVisible: false,
      removeIndex: false,
      typeMoreBoxVisible: false,
      left: 0,
      top: 0,
    };
  },
  mounted() {
    for (let i = 1; i < this.columns.length; i++) {
      this.repetitionColumns.push(this.columns[i]);
    }

    // console.log(this.repetitionColumns);
  },
  computed: {
    hasNumber() {
      let type = this.type;
      let numberTypes = [
        "int64",
        "int32",
        "int16",
        "int8",
        "float64",
        "float32",
      ];

      for (let numberType of numberTypes) {
        if (type == numberType) return true;
      }
      return false;
    },
    hasInt(){
      let type = this.type;
      let intTypes = [
        "int64",
        "int32",
        "int16",
        "int8",
      ];

      for (let intType of intTypes) {
        if (type == intType) return true;
      }

      return false;
    },
    hasFloat() {
      let type = this.type;
      let floatTypes = ["float64", "float32"];
      for (let floatType of floatTypes) {
        if (type == floatType) return true;
      }
      return false;
    },
    hasObj() {
      let type = this.type;
      let objTypes = ["object", "category"];

      for (let objType of objTypes) {
        if (type == objType) return true;
      }

      return false;
    },
    hasDatetime() {
      let type = this.type;

      return type == "datetime64[ns]";
    },
  },
  methods: {
    setFilterBoxVisble(val) {
      this.filterBoxVisible = val;
    },
    showMoreBox($event) {
      //动态样式的变量， 用于记录鼠标的位置，并且让盒子动态定位到这个位置
      this.left = $event.clientX;
      this.top = $event.clientY + 5;

      this.moreBoxVisible = !this.moreBoxVisible;
    },
    setType(type) {
      let sheetName = this.sheetName;
      let field = this.column;

      let data = {
        sheetName,
        field,
        type,
      };

      this.$axios.post("/filter/setType", data).then((res) => {
        if (res.code == 200) {
          this.$emit(
            "set-types",
            this.index - 1,
            res.data.types[this.index - 1]
          );
          this.$message({
            type: "success",
            message: res.msg,
          });
        } else this.$message.error(res.msg);
      });
    },
    showDelFrontColumn() {
      this.delFrontColumnBoxVisible = true;
      this.moreBoxVisible = false;
    },
    showDelLastColumn() {
      this.delLastColumnBoxVisible = true;
      this.moreBoxVisible = false;
    },
    showRepetition() {
      this.delRepetitionBoxVisible = true;
      this.moreBoxVisible = false;
    },
    delBlank() {
      console.log(this.column, this.sheetName);
      let data = {
        sheet_name: this.sheetName,
        column: this.column,
      };
      this.$axios.post("/filter/delBlank", data).then((res) => {
        if (res.code == 200) {
          let data = JSON.parse(res.data.json);

          this.$emit("reset-table", data);
          this.$emit("set-record", res.data.record);
          this.$message({
            type: "success",
            message: res.msg,
          });
        } else {
          this.$message.error(res.msg);
        }
      });
      this.moreBoxVisible = false;
    },
    delLastColumn() {
      if (Number.isNaN(Number.parseInt(this.numberLineLast))) {
        this.$message.error("请输入数字");
        return;
      } else if (Number.parseInt(this.numberLineLast) <= 0) {
        this.$message.error("行数必须大于0");
        return;
      }

      this.numberLineLast = Number.parseInt(this.numberLineLast);

      let data = {
        numberLine: this.numberLineLast,
        sheet_name: this.sheetName,
      };

      this.$axios.post("/filter/delLastLine", data).then((res) => {
        if (res.code == 200) {
          this.delLastColumnBoxVisible = false;

          let data = JSON.parse(res.data.json);

          this.$emit("reset-table", data);
          this.$emit("set-record", res.data.record);
          this.$message({
            type: "success",
            message: res.msg,
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    delFrontColumn() {
      if (Number.isNaN(Number.parseInt(this.numberLineFront))) {
        this.$message.error("请输入数字");
        return;
      } else if (Number.parseInt(this.numberLineFront) <= 0) {
        this.$message.error("行数必须大于0");
        return;
      }

      this.numberLineFront = Number.parseInt(this.numberLineFront);

      let data = {
        numberLine: this.numberLineFront,
        sheet_name: this.sheetName,
      };

      this.$axios.post("/filter/delFrontLine", data).then((res) => {
        if (res.code == 200) {
          this.delFrontColumnBoxVisible = false;

          let data = JSON.parse(res.data.json);

          this.$emit("reset-table", data);
          this.$emit("set-record", res.data.record);

          this.$message({
            type: "success",
            message: res.msg,
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    delRepetition() {
      let data = {
        columns: this.repetitionColumns,
        sheet_name: this.sheetName,
      };
      this.$axios.post("/filter/delRepeat", data).then((res) => {
        if (res.code == 200) {
          let data = JSON.parse(res.data.json);

          this.$emit("reset-table", data);
          this.$emit("set-record", res.data.record);

          this.delRepetitionBoxVisible = false;

          this.$message({
            type: "success",
            message: res.msg,
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    filter(operator) {
      this.moreBoxVisible = false;
      this.filterMoreBoxVisible = false;
      this.$emit("set-filter-box-visible", true);

      let condition = {
        column: this.column,
        operator: operator,
        logic: "and",
        value: "",
      };

      this.$emit("append-condition", condition);
    },
  },
};
</script>

<style>
.delRepetitionBox {
  max-height: 250px;
  overflow-y: scroll;
}

.delRepetitionBox .el-checkbox-group {
  display: flex;
  flex-direction: column;
}

.delRepetitionBox .el-checkbox-group label {
  margin-bottom: 5px;
}
</style>

<style scope>
.filter-sheet-field-more-box ul {
  list-style-type: none;
  border: 1px solid black;
  padding: 0;

  text-align: center;
}

.hidden {
  visibility: hidden;
}

.more-box {
  position: fixed;
  background-color: white;

  width: 200px;
  color: black;

  z-index: 100;

  cursor: default;
  margin-top: 0%;
  margin-left: -10%;
}

.more-box > li {
  padding: 5px 0 5px 0;
}

.more-box > li:hover {
  background-color: rgb(105, 103, 103);
  color: white;
}

.filter {
  position: relative;
}

.filter-more,
.type-more {
  position: fixed;

  width: 150px;

  color: black;
  background-color: white;
  border: 1px solid black;

  cursor: default;

  z-index: 1;
}

.filter-more li,
.type-more li {
  padding: 5px 0 5px 0;
}

.filter-more li:hover,
.type-more li:hover {
  background-color: rgb(105, 103, 103);
  color: white;
}
</style>